<template>
    <div class="main">
        <div class="verTit">申请人身份验证</div>
        <div>
            <div class="login" style="margin-top: 0.8rem;">
                <div class="phoneCont">
                    <input type="text" v-model="number" placeholder="请输入手机号码" name="">
                </div>
                <div class="phoneCont">
                    <input type="text" v-model="verCode" placeholder="请输入验证码" name="" >
                    <span v-if="yanzheng" @click="acquire">获取验证码</span>
                    <span v-else style="color: #999;">{{times}}s后重发</span>
                </div>
            </div>
        </div>
        <div class="submit" @click="submit">确认</div>
    </div>
</template>
<script>
export default {
  name: 'verification',
  components: {
    
  },
  data() {
      return {
          number:'',
          verCode:'',
          yanzheng:true,
          times: 30
      }
  },
  methods: {
      acquire(){
         if(!/^1[3456789]\d{9}$/.test(this.number)){
             this.$toast('请输入正确的手机号码')
             return
         }
         this.yanzheng = false
         this.getCode()
         var prams = {
                phone:this.number
            }
            this.$store.dispatch('login/SendVerficationCode',prams).then((res) => {
               this.$toast(res.msg)
            })
      },
      getCode() {
            this.timer = setInterval(()=>{
                this.times--
                if(this.times===0){
                this.yanzheng = true
                clearInterval(this.timer)
                }
            },1000)
        },
        submit(){
            if(!this.check()){
                return
            }
            var prams = {
                code:this.verCode,
                phone:this.number
            }
            this.$store.dispatch('login/GetInvitationByPhone',prams).then((res) => {
                if (res.status == 200) {
                   this.$store.commit('login/setResultData', res.data)
                  this.$router.push('result')
                } else {
                    this.$toast(res.msg)
                }
                
            })
        },
        check(){
           if(!/^1[3456789]\d{9}$/.test(this.number)){
               this.$toast('请输入正确的手机号码')
               return false
           }
           if(!this.verCode){
               this.$toast('请输入验证码')
               return false
           }
           return true
        }
  },
}
</script>
<style scoped>
.main{
    background:#fff;
    height: 100%;
}
.verTit{
    font-size: 0.44rem;
    color: #222222;
    margin-left: 0.48rem;
    font-weight: bold;
    padding-top: 0.72rem;
}
.phoneCont{
    width: 6.3rem;
    height: 0.84rem;
    border-bottom: 1px solid #EEEEEE;
    margin: 0 auto;
    margin-top: 0.2rem;
}
.phoneCont img{
    width: 0.28rem;
    height: 0.32rem;
    float: left;
    margin: 0.22rem 0.27rem;
    vertical-align: middle;
}
.phoneCont input{
    float: left;
    margin: 0.15rem 0;
    height: 0.5rem;
    width: 3.8rem;
    border: none;
    font-size: 0.3rem;
    padding-left: 0.1rem;
    line-height: 0.5rem;
    vertical-align: middle;
}
.phoneCont span{
   float: right;
   color: #4B7BF9;
   font-size: 0.28rem;
   margin-top: 0.14rem;
}
.submit{
    width: 5.41rem;
height: 0.84rem;
line-height: 0.84rem;
text-align: center;
color: #fff;
font-size: 0.32rem;
background: linear-gradient(-90deg, #3A42E4,#4C82F1);
border-radius: 0.33rem;
margin: 0 auto;
margin-top: 0.6rem;
}
</style>